<template>
  <div class="mainbBg" style="height: 100%; background-color: #ededed">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert">{{ alertText }}</alert>
    </div>
    <div style="height: 100%; background-color: #ededed; margin: 0 15px">
      <div class="last_record_box" style="padding-top: 10px">
        <div
          style="margin-left: 15px; color: grey; border: 0; margin-bottom: 5px"
        >
          正在填写{{ date }}的日报
        </div>
        <x-switch title="补填昨天日报?" v-model="isLastDay"></x-switch>
      </div>
      <div v-if="isShowMemory">
        <div
          class="temp_content"
          v-for="(item, index) in reportList"
          :key="index"
          style="margin: 15px"
        >
          <div style="margin-top: 10px; padding-top: 5px; padding-right: 5px">
            <img
              src="~static/img/report/modify.png"
              @click="modifyMemory(item)"
              height="30"
              width="30"
              style="float: right; margin-top: -5px"
            />
          </div>
          <!-- 普通日报的显示模板 -->
          <div style="padding: 5px">
            <div style="word-wrap: break-word; color: grey">
              <br />
              {{ type(item.type) }}({{ item.startTime }}--{{ item.endTime }}):
              <br />
              <span v-if="item.isProject">进度：{{ item.progress }}%</span>
              <br />
              <span>{{ item.content }}</span>
            </div>
          </div>
          <br />
          <div style="height: 15px; margin-left: calc(100% - 40px)">
            <img
              src="~static/img/report/delete.png"
              height="45"
              width="45"
              style="margin-top: -26px"
              @click="deleteMemory(item)"
            />
          </div>
        </div>
      </div>

      <div class="msgContent" style="padding: 0">
        <div class="msgBox" style="overflow: hidden; margin-top: 10px">
          <div>
            <popup-radio
              class="popupradio-custom"
              title="标签"
              text-align="center"
              :options="types"
              v-model="typeSelected"
              @on-show="onShow"
              placeholder="下拉选择"
            ></popup-radio>
          </div>
          <div v-show="this.typeSelected !== -1">
            <x-input
              title="起始"
              text-align="center"
              v-model="segStartTime"
              mask="99:99"
              required="true"
              placeholder="00:00"
              :is-type="checkTimeFormat"
              autocomplete="true"
              :show-clear="false"
            />
            <x-input
              title="截止"
              text-align="center"
              v-model="segEndTime"
              mask="99:99"
              required="true"
              placeholder="00:00"
              :is-type="checkTimeFormat"
              :show-clear="false"
            />
            <x-input
              v-if="isShowProgress"
              title="任务内容："
              text-align="left"
              v-model="typeSelectedItem.task"
              disabled
            />
            <div class="progressDiv" v-if="isShowProgress">
              <c-progress
                v-if="isShowProgress"
                class="c-progress"
                :percent.sync="progress"
                :initProgress="initProgress"
                type="success"
                :width="getWidth()"
              />
            </div>
            <x-textarea
              class="plan"
              v-model="content"
              placeholder="点击输入内容"
              title="内容"
              :max="200"
            ></x-textarea>
          </div>
        </div>
      </div>
      <div class="plan">
        <x-textarea
          style="border-radius: 10px"
          v-model="target"
          placeholder="必填（仅需填写一次即可）"
          title="明日计划："
        ></x-textarea>
      </div>
      <div style="height: 20px; background-color: #ededed"></div>
      <div
        style="
          height: 70px;
          width: 100%;
          background-color: #ededed;
          margin-top: -15px;
        "
      >
        <div style="width: 300px; margin: 15px auto; text-align: center">
          <button
            @click="saveTemporary"
            style="
              font-size: medium;
              height: 50px;
              width: 85px;
              border-radius: 16px;
              color: white;
              border: none;
              background-color: rgba(26, 188, 156, 0.8);
            "
          >
            新增
          </button>
          <button
            @click="clickSaveToServerButton"
            style="
              font-size: medium;
              height: 50px;
              width: 85px;
              border-radius: 16px;
              color: white;
              border: none;
              background-color: rgba(26, 188, 156, 0.8);
            "
          >
            暂存
          </button>
          <button
            @click="submit"
            style="
              font-size: medium;
              height: 50px;
              width: 85px;
              border-radius: 16px;
              color: white;
              border: none;
              background-color: rgba(26, 188, 156, 0.8);
            "
          >
            提交
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable camelcase */

import {
  XHeader,
  Group,
  XInput,
  XSwitch,
  Confirm,
  XTextarea,
  PopupRadio,
  XButton,
  XAddress,
} from "vux";
import { mapState } from "Vuex";
import report from "api/report";
import report_reminder from "api/report_reminder";
import tags from "api/tag";
import task from "api/task";
import AMap from "AMap"; // 引入高德地图
import location from "utilMethods/location.js";
import { NumOfChineseChar } from "utilMethods/reg.js";
import CProgress from "components/Progress/progress";
import { Upload } from "element-ui";

export default {
  name: "CreateDayReport",
  props: ["isReallyModifyContentDay"],
  components: {
    XHeader,
    Group,
    XInput,
    XTextarea,
    PopupRadio,
    XButton,
    XAddress,
    XSwitch,
    Confirm,
    CProgress,
  },
  data() {
    return {
      isShowCreateTag: false, // 控制新增标签弹窗
      reportId: 0,
      initDate: "", // 当前日报的初始日期
      date: "",
      title: "日期选择：",
      placeholder: "",
      projectStart: "",
      endTime: "",
      content: "",
      impression: "",
      target: "", // 今日目标
      isShowAlert: false, // 是否显示验证提示框
      alertText: "",
      typeSelected: null, // 这个是id
      typeSelectedItem: {}, // 这个是选择的整个tag信息
      reportList: [],
      isShowMemory: false,
      isShown: false,

      repoPlace: "", // 获取到日报的定位地点
      chineseCharNeeded: 20,
      isLastDay: null, // 今天
      numberOfFailure: 0, // 自动定位失败次数
      reportSuccessfully: false,

      // 进度
      initProgress: 0,
      progress: 0,
      isShowProgress: false,

      // 高德地图获取当前位置
      location: "",
      lat: 0,
      lng: 0,

      segStartTime: "",
      segEndTime: "",

      countRest: 0, //统计本次日报使用休息标签的次数
    };
  },
  watch: {
    isLastDay() {
      if (this.isLastDay) {
        const now = this.setToday();
        this.date = this.setOneDayAgo(now);
      } else {
        this.date = this.initDate;
      }
    },
    async typeSelected() {
      if (this.typeSelected === -2) {
        this.countRest = 0;
        const res = await report.getIsHaveRestTime();
        if (this.reportList.length !== 0) {
          this.reportList.forEach((item) => {
            if (item.type === -2) {
              this.countRest++;
            }
          });
        }
        if (this.countRest === 0 && res.data) {
          //do nothing
        } else {
          this.typeSelected = 0;
          this.showAlert('"休息"标签仅限一周使用一次');
          // return
        }
      }
      this.getTypeSelectedItem();
      this.chooseProject();
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    ...mapState(["allBacklog", "modifyContentDay"]),
    types() {
      const { allBacklog } = this;
      const arr = [];
      let temp;
      temp = {
        key: 0,
        value: "学习",
      };
      arr.push(temp);
      temp = {
        key: -2,
        value: "休息",
      };
      arr.push(temp);
      if (!allBacklog) {
        return;
      }
      allBacklog.forEach((element) => {
        if (element.hasOwnProperty("projectId")) {
          temp = {
            key: element.projectId,
            value: element.title,
            isProject: true,
            progress: element.progress,
            task: element.task,
          };
        } else {
          temp = {
            key: element.id,
            value: element.name,
            isProject: false,
          };
        }
        arr.push(temp);
      });
      return arr;
    },
  },
  created() {
    // 设置今天的日期，判断归档是昨天还是今天
    this.setToday();
  },
  mounted() {
    // 取出暂存的日报
    this.getTempReportFromServer();
    // 监听手机的返回键
    window.addEventListener("popstate", this.getTempReportList, false);
    // 数据初始化
    this.modifyInit();
    this.locationBtn();
    this.typeSelected = 0;
    this.getMinLengthOfReport();
  },
  destoryed() {
    window.removeEventListener("popstate", this.getTempReportList, false);
  },
  methods: {
    getWidth() {
      const clientWidth = document.body.clientWidth;
      return clientWidth * 0.7;
    },
    back() {
      this.$router.go(-1);
    },
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    // 关闭验证提示框
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
    // FIXME:这里有问题，会把字数不够的也存进reportList
    getTempReportList() {
      if (!this.reportSuccessfully) {
        let minArr = {
          startTime: this.startTime,
          endTime: this.endTime,
          type: this.typeSelected,
          content: this.content,
          imgSrc: "",
        };
        if (this.content !== "") {
          this.reportList.push(minArr);
        }
        let tempDayReport = {};
        tempDayReport.activities = this.reportList;
        tempDayReport.impression = this.impression;
        tempDayReport.target = this.target;
        tempDayReport.date = this.initDate;
        this.$store.commit("stageModifyContentDay", tempDayReport);
      }
    },
    async onShow() {
      const result = await tags.getAllTag();
      if (result.code === 0) {
        this.showAlert("获取【标签】失败");
      } else if (result.code === 1) {
        let arr = [];
        if (result.data.projectTags) {
          arr = arr.concat(result.data.projectTags);
        }

        arr = arr.concat(result.data.userTags);
        this.$store.commit("recordAllBacklog", arr);
      }
      this.changeColor();
    },
    type(id) {
      let type;
      this.types.forEach((element) => {
        if (id === element.key) {
          type = element.value;
        }
      });
      return type;
    },
    getTypeSelectedItem() {
      this.types.forEach((element) => {
        if (this.typeSelected === element.key) {
          this.typeSelectedItem = element;
        }
      });
    },
    modifyInit() {
      // 显示标签
      this.onShow();
      // 如果不是修改，或者修改没内容
      if (!this.modifyContentDay || !this.modifyContentDay.activities) {
        return;
      }
      // 初始化为修改的内容
      this.initDate = this.modifyContentDay.date;
      this.date = this.modifyContentDay.date;
      this.modifyContentDay.activities.forEach((element) => {
        let minArr = {
          startTime: element.startTime.substring(0, 5),
          endTime: element.endTime.substring(0, 5),
          type: element.type,
          content: element.content,
          imgSrc: element.imgSrc,
        };
        this.reportList.push(minArr);
      });
      this.impression = this.modifyContentDay.impression;
      this.target = this.modifyContentDay.target;
      this.userId = this.modifyContentDay.userId;
      this.modifyContentDay.date === this.date
        ? (this.isLastDay = false)
        : (this.isLastDay = true);
      this.date = this.modifyContentDay.date;
      this.reportId = this.modifyContentDay.reportId;
      this.isShowMemory = true;
    },
    // 设置为某一天的前一天
    setOneDayAgo(now) {
      // 2020-03-04
      let year = now.substring(0, 4);
      let month = +now.substring(5, 7) - 1;
      let date = now.substring(8);
      let today = new Date(year, month, date);
      let yesterday_milliseconds = today.getTime() - 1000 * 60 * 60 * 24;
      let yesterday = new Date();
      yesterday.setTime(yesterday_milliseconds);
      let strYear = yesterday.getFullYear();
      let strDay = yesterday.getDate();
      let strMonth = yesterday.getMonth() + 1;
      if (strMonth < 10) {
        strMonth = "0" + strMonth;
      }
      if (strDay < 10) {
        strDay = "0" + strDay;
      }
      return strYear + "-" + strMonth + "-" + strDay;
    },
    // 设置今天的时间
    setToday() {
      let now = new Date();
      let cmonth = now.getMonth() + 1;
      let day = now.getDate();
      let hour = now.getHours();
      let min = now.getMinutes();
      if (cmonth < 10) cmonth = "0" + cmonth;
      if (day < 10) day = "0" + day;
      this.initDate = now.getFullYear() + "-" + cmonth + "-" + day;
      this.date = this.initDate;
      // Monica：9点前自动打开按钮

      if (!this.isLastDay) {
        if (hour >= 0 && hour < 8) {
          this.isLastDay = true;
        } else {
          this.isLastDay = false;
        }
      }
      // this.placeholder = this.date;
      return now.getFullYear() + "-" + cmonth + "-" + day;
    },

    async submit() {
      if (this.target == null || this.target == "") {
        this.showAlert("请填写【明日计划】,帮助您更好地开展工作。");
      } else {
        if (this.repoPlace === "") {
          this.getDefaultPlaceWhenFail();
        }
        let minArr = {
          startTime: this.segStartTime,
          endTime: this.segEndTime,
          type: this.typeSelected,
          content: this.content,
          imgSrc: "",
        };
        // 在这个函数里面判断是修改还是新增
        await this.editRepo(minArr);
      }
    },
    // 比较起始时间和截止时间,A<B返回-1，A=B返回0，A>B返回1
    compareTime(temp_startTime, temp_endTime) {
      let hour_s = temp_startTime.substring(0, 2);
      let minute_s = temp_startTime.substring(3, 5);
      let hour_e = temp_endTime.substring(0, 2);
      let minute_e = temp_endTime.substring(3, 5);
      if (hour_s < hour_e) {
        return -1;
      } else if (hour_s > hour_e) {
        return 1;
      } else if (hour_e === hour_s) {
        if (minute_s < minute_e) {
          return -1;
        } else if (minute_s > minute_e) {
          return 1;
        } else {
          return 0;
        }
      }
    },
    async saveTemporary() {
      // 判断标签不能为空
      if (
        this.typeSelected === null ||
        this.typeSelected === undefined ||
        this.typeSelected === ""
      ) {
        this.showAlert("请选择标签");
      } else {
        let minArr = {
          startTime: this.segStartTime,
          endTime: this.segEndTime,
          type: this.typeSelected,
          content: this.content,
          imgSrc: "",
          isProject: this.typeSelectedItem.isProject,
          progress: this.progress,
        };
        // 对暂存内容进行验证
        if (this.judgeRepo(minArr)) {
          this.reportList.push(minArr);
          this.isShowMemory = true;
          //若前一次是使用了【休息】标签，第二次自动更换为【学习】
          if (minArr.type === -2) {
            this.typeSelected = 0;
          }
          // 存完过后将input框中数据初始化，方便下一次填写
          this.content = "";
          this.clearTime();
        }
      }
    },
    judgeRepo(minArr) {
      let chineseCharNum = NumOfChineseChar(minArr.content);
      if (minArr.content === "") {
        this.showAlert("【内容】为空");
        return false;
      } else if (minArr.startTime === "") {
        this.showAlert("【起始时间】为空");
        return false;
      } else if (minArr.endTime === "") {
        this.showAlert("【截止时间】为空");
        return false;
      } else if (!this.checkTime(minArr.startTime, minArr.endTime)) {
        this.showAlert("所填【时间段重叠】");
        return false;
      } else if (this.compareTime(minArr.startTime, minArr.endTime) === 1) {
        // 截止时间必须再起始时间之后
        this.showAlert("截止时间须在起始时间之后");
        return false;
        //  Mo-ni：1012 取消【休息】标签字数限制
      } else if (
        this.typeSelected !== -2 &&
        chineseCharNum < this.chineseCharNeeded
      ) {
        // } else if (chineseCharNum < this.chineseCharNeeded) {
        let need = this.chineseCharNeeded - chineseCharNum;
        this.showAlert("日报内容还需填写" + need + "字");
        return false;
      } else {
        return true;
      }
    },
    deleteMemory(item) {
      const index = this.reportList.indexOf(item);
      this.reportList.splice(index, 1);
      // 让三个默认的时间和第几条记录对齐
      this.content = "";
      this.clearTime();
    },
    modifyMemory(item) {
      if (item.type === -2) {
        this.typeSelected = -2;
      }
      const index = this.reportList.indexOf(item);
      this.typeSelected = item.type;
      this.content = item.content;
      this.segStartTime = item.startTime;
      this.segEndTime = item.endTime;
      this.reportList.splice(index, 1);
    },
    // 判断时间段是否有重复
    checkTime(temp_startTime, temp_endTime) {
      let flag = true;
      if (this.reportList.length === 0) {
        return true;
      }
      this.reportList.forEach((element) => {
        if (element.type !== -1) {
          if (
            !(
              // 比较起始时间和截止时间,A<B返回-1，A=B返回0，A>B返回1
              (
                this.compareTime(temp_endTime, element.startTime) < 1 ||
                this.compareTime(temp_startTime, element.endTime) > -1
              )
            )
          ) {
            flag = false;
          }
        }
      });
      return flag;
    },
    clearTime() {
      this.segStartTime = "";
      this.segEndTime = "";
    },
    trim(str) {
      return str.replace(/(^\s*)|(\s*$)/g, "");
    },
    // 判断普通日报的内容
    judge_repo(minArr) {
      // 时间段是否重复
      let flag = this.checkTime(minArr.startTime, minArr.endTime);
      // 内容的字数
      let chineseCharNum = NumOfChineseChar(minArr.content);
      if (!flag) {
        this.showAlert("所填日报时间段不得重叠");
        return false;
      } else if (this.compareTime(minArr.startTime, minArr.endTime) === 1) {
        // 截止时间必须再起始时间之后
        this.showAlert("截止时间须在起始时间之后");
        return false;
        //  Mo-ni：1012 取消【休息】标签字数限制
      } else if (
        this.typeSelected !== -2 &&
        chineseCharNum < this.chineseCharNeeded
      ) {
        // } else if (chineseCharNum < this.chineseCharNeeded) {
        let need = this.chineseCharNeeded - chineseCharNum;
        this.showAlert("日报内容还需填写" + need + "字");
        return false;
      } else {
        return true;
      }
    },
    async editRepo(minArr) {
      //Moni：不明白flag的作用，先弃用

      let flag;
      //Moni：10-13修改
      // if (minArr.type === 0 || minArr.type === -2) {
      //   flag = true;
      // } else if (minArr.type) {
      //   flag = false;
      // }

      if (
        minArr.type !== null ||
        minArr.type !== undefined ||
        minArr.type !== ""
      ) {
        flag = true;
      } else {
        flag = false;
      }
      if (flag && !!minArr.startTime && !!minArr.endTime && !!minArr.content) {
        if (this.judgeRepo(minArr)) {
          this.reportList.push(minArr);
          // Monica:我把发送日报的接口交互提取为一个函数了，减少代码量
          if (this.isReallyModifyContentDay === undefined) {
            await this.postDailyReport();
          } else {
            await this.updateDailyReport();
          }
        }
      } else {
        if (this.isReallyModifyContentDay === undefined) {
          await this.postDailyReport();
        } else {
          await this.updateDailyReport();
        }
      }
    },
    tranContent(content) {
      return JSON.parse(content);
    },
    async getMinLengthOfReport() {
      let reportType = "日报";
      const result = await report_reminder.getMaxOfMinLengthOfReport(
        reportType
      );
      if (result.code === 1) {
        this.chineseCharNeeded = result.data;
      } else {
        this.chineseCharNeeded = 20;
      }
    },
    /** 获取高德地图定位 */
    locationBtn() {
      let _that = this;
      let geolocation = location.initMap("allmap"); // 定位
      AMap.event.addListener(geolocation, "error", () => {
        if (_that.numberOfFailure++ < 3) {
          this.locationBtn();
        }
      });
      AMap.event.addListener(geolocation, "complete", (result) => {
        _that.repoPlace =
          result.addressComponent.province +
          result.addressComponent.city +
          result.addressComponent.district;
      });
    },
    async getDefaultPlaceWhenFail() {
      const result = await report.getReportsByUserId({
        end: this.setOneDayAgo(this.date),
        userId: this.userInfo.userId,
        start: this.setOneDayAgo(this.date),
      });
      let defalutValue;
      if (result.code === 0) {
        defalutValue = "定位失败";
      } else if (result.data.place === "") {
        defalutValue = "定位失败";
      } else {
        defalutValue = result.data[0].place;
      }
      this.repoPlace = defalutValue;
    },
    async postDailyReport() {
      const result = await report.postReport({
        impression: this.impression,
        target: this.target,
        date: this.date,
        place: this.repoPlace,
        activities: this.reportList,
      });
      if (result.code === 0) {
        // 如果失败了显示提示
        this.showAlert("提交失败(" + result.message + ")");
        this.isShowMemory = true;
        this.content = "";
      } else {
        this.showAlert("提交成功");
        this.reportSuccessfully = true;
        setTimeout(this.back, 1000);
      }
    },
    async updateDailyReport() {
      const result = await report.postUpdateReport({
        activities: this.reportList,
        date: this.date,
        impression: this.impression,
        target: this.target,
        reportId: this.reportId,
        place: this.repoPlace,
        userId: this.userInfo.userId,
      });
      // 获取到执行结果后，
      if (result.code === 0) {
        // 如果失败了显示提示
        this.showAlert("修改失败(" + result.message + ")");
      } else {
        this.showAlert("修改成功");
        this.reportSuccessfully = true;
        this.$store.commit("stageModifyContentDay", undefined);
        setTimeout(this.back, 1000);
      }
    },
    async clickSaveToServerButton() {
      if (this.reportSuccessfully) {
        this.showAlert("已成功提交日报，无需暂存");
        setTimeout(this.closeTip, 1700);
        return;
      }
      this.showAlert("未填写完的日报将会暂存，请在1小时内填写完成");
      setTimeout(() => {
        this.saveToServer();
        this.back();
      }, 1700);
    },
    saveToServer() {
      let minArr = {
        startTime: this.segStartTime,
        endTime: this.segEndTime,
        type: this.typeSelected,
        content: this.content,
        imgSrc: "",
      };
      this.reportList.push(minArr);
      let tempDayReport = {
        impression: this.impression,
        target: this.target,
        date: this.date,
        place: this.repoPlace,
        activities: this.reportList,
      };
      this.postTempReportToServer(tempDayReport);
    },
    async getTempReportFromServer() {
      const result = await report.getTempReportFromServer();
      if (result.code === 1) {
        let tempDayReport = result.data;
        this.reportList = tempDayReport.activities;
        this.isShowMemory = true;
      }
    },
    async postTempReportToServer(tempDayReport) {
      await report.postTempReportToServer(tempDayReport);
    },
    changeColor() {
      let tempNode = document.getElementsByClassName("weui-cells_radio");
      let children = tempNode[0].childNodes;
      for (let i = 0; i < children.length; ++i) {
        if (this.types[i] !== undefined) {
          if (!this.types[i].hasOwnProperty("isProject")) {
          } else if (this.types[i].isProject) {
            if (children[i].style !== undefined) {
              children[i].style.backgroundColor = "rgba(68,197,172,.2)";
            }
          } else {
            if (children[i].style !== undefined) {
              children[i].style.backgroundColor = "rgba(229,71,103,.2)";
            }
          }
        }
      }
    },
    async chooseProject() {
      const result = await task.getProgress(this.typeSelectedItem.key);
      if (result.code === 1) {
        this.initProgress = result.data;
        this.progress = this.initProgress;
        this.isShowProgress = true;
      }
    },
    // 新增标签:想了一下，新增放在这里比较方便
    showCreateTagWin() {
      this.isShowCreateTag = true;
    },
    async postCreateNewTag() {
      let tagName = [];
      tagName.push(this.$refs.confirm.msg);
      const result = await tags.postCreateTag(tagName);
      if (result.code === 1) {
        this.showAlert("新建标签成功");
        await this.onShow();
      } else if (result.code === 0) {
        this.showAlert("新建标签失败，请稍后再试");
      }
    },

    checkTimeFormat(value) {
      // let reg = /^([01][0-9]|[2][0-3])[0-5][0-9]$/;
      let reg = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;
      if (reg.test(value)) {
        return { valid: true };
      } else {
        return { valid: false, msg: "格式错误" };
      }
    },

    clearIcon(time) {
      this[time] = "";
    },
  },
};
</script>
<style lang="less">
.weui-cells_radio {
  height: 250px;
}

.weui-cells_radio .weui-cell__bd p {
  margin: 5px;
}

#allmap {
  border: 1px black solid;
  width: 500px;
  height: 500px;
  position: fixed;
  left: 0;
  top: 1px;
}

.last_record_box {
  background-color: #ffffff;
  border-radius: 10px;
}

.textarea_box {
  border: #ededed 1px solid;
  border-radius: 10px;
  width: 92%;
  height: 5em;
  padding: 10px 15px;
}

.temp_content {
  padding: 5px 10px -10px 10px;
  background-color: white;
  margin-top: 10px;
  border-radius: 10px;
}

.progressDiv {
  margin-left: 15px;
  margin-bottom: 10px;
  .group {
    div {
      display: flex;
      .input {
        border: 1px solid gray;
        padding: 0;
      }
    }
    margin-bottom: 10px;
  }
}
.plan {
  margin-top: 10px;
  border-radius: 10px;
  background-color: white;
}
</style>
